<template lang="html">
  <div class="m-index">
    <header>
      拉勾网
    </header>
    <section>
      <Position />
    </section>
    <footer>
      <ul>
        <li class="active" data-url="index.html">
          <i class="yo-ico">&#xe6bb;</i>
          <b>职位</b>
        </li>
        <li data-url="search.html">
          <i class="yo-ico">&#xe65c;</i>
          <b>搜索</b>
        </li>
        <li data-url="mine.html">
          <i class="yo-ico">&#xe78c;</i>
          <b>我的</b>
        </li>
      </ul>
    </footer>
  </div>
</template>

<script>
import '../../media/images/iconfont/iconfont.ttf'
import '../../media/images/iconfont/iconfont.woff'

import Position from './position.vue'

export default {
  data() {
    return {
      msg: 'aa'
    }
  },
  methods: {

  },
  components: {
    Position: Position
  }
}
</script>

<style lang="scss">
@charset "UTF-8";
@import "../../styles/app.scss";
@import "../../styles/modules/common.scss";
.m-index {
  height: 100%;
  @include flexbox();
  @include flex-direction(column);

  header {
    height: .44rem;
    background: $base-color;
    font-size: .18rem;
    color: #fff;
    text-align: center;
    line-height: .44rem;
  }

  section {
    background: #fff;
    @include flex();
    width: 100%;
    overflow: hidden;
  }

  footer {
    height: .44rem;
    background: #f6f6f6;
    ul {
      height: 100%;
      @include border(1px 0 0 0);
      @include flexbox();
      li {
        @include flex();
        @include flexbox();
        @include justify-content(center);
        @include align-items(center);
        b,i {
          font-weight: 100;
          font-size: .18rem;
          color: #c2cfcc;
        }
        &.active b,
        &.active i {
          color: $base-color;
        }
      }
    }
  }
}
</style>
